<template>
  <div>
    <el-col :span="4" style="height: 100vh;background-color: rgba(48,81,114,0.44)">
      <div style="width: auto; height: 8vh;background-color: rgba(48,81,114,0.8);display: flex">
        <el-image :src="src"></el-image>
        <h2>疫情舆论分析</h2>
      </div>

      <el-menu
          router
          background-color="#30517270"
          text-color="#fff"
          active-text-color="#000000">
        <el-menu-item index="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/search">
          <i class="el-icon-search"></i>
          <span slot="title">数据检索</span>
        </el-menu-item>
        <el-menu-item index="/analysis">
          <i class="el-icon-s-data"></i>
          <span slot="title">数据分析</span>
        </el-menu-item>
        <el-menu-item index="/topic">
          <i class="el-icon-s-tools"></i>
          <span slot="title">主题挖掘</span>
        </el-menu-item>
        <el-menu-item index="/sentiment">
          <i class="el-icon-s-comment"></i>
          <span slot="title">情感分析</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="20">
      <Header></Header>
    </el-col>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name: "sideNavigation",
  components: {Header},
  data() {
    return {
      flag: '',
      src: require("@/assets/logo.svg"),
    }
  },
}
</script>

<style scoped>
.el-menu {
  border-right: red;
}

h2 {
  margin-block-end: 0;
  color: #569ae0;
}

>>> .el-image__inner {
  width: 90%;
  height: 90%;
}
</style>